<template>
  <el-dialog
    :title="`${title}管理员`"
    :visible.sync="isShow"
    width="40%"
    @close="closeForm"
  >
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form ref="userform" :model="form" :rules="rules" label-width="100px" padding-right="40px">
      <el-row type="flex" justify="space-around" align="middle">
        <el-form-item label="管理员名称 :" prop="username">
          <el-input v-model="form.username" style="width:120%" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="管理员邮箱 :" prop="email">
          <el-input v-model="form.email" style="width:120%" placeholder="请输入邮箱" />
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="space-around" align="middle">
        <el-form-item label="管理员密码 :" prop="password">
          <el-input v-model="form.password" style="width:120%" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="管理员手机 :" prop="phone">
          <el-input v-model="form.phone" style="width:120%" placeholder="请输入手机号" />
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="space-around" align="start">
        <el-form-item label="管理员状态 :" width="100%" prop="status">

          <template slot-scope="{row}">
            <el-switch
              v-model="form.status"
              inactive-text="禁用"
              active-text="启用"
              active-value="1"
              inactive-value="0"
              @change="switchChange(row.status,row.id)"
            />
          </template>

        </el-form-item>
        <el-form-item label="管理员头像 :" prop="avatar">
          <ImageUpload ref="uploadImg" />
        </el-form-item>
      </el-row>
      <el-form-item label="管理员角色 :" prop="roleid_list">
        <el-checkbox-group v-model="form.roleid_list">
          <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
            {{ item.role_name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="isShow=false">取消</el-button>
      <el-button v-if="form.id" type="primary" @click="updateUser">修改</el-button>
      <el-button v-else type="primary" @click="addUserSubmit">添加</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { getRoleListApi } from '@/api/permission/role'
import { addUserApi, getUserInfoApi, updataUserApi, changeUserStatus } from '@/api/permission/user'
export default {
  data() {
    return {
      isShow: false,
      form: {
        avatar: '',
        email: '',
        password: '',
        phone: '',
        roleid_list: [],
        status: '',
        username: ''
      },
      // userList: [],
      // 验证规则
      rules: {
        username: [{ required: true, message: '管理员名称必须！', trigger: 'blur' }],
        email: [
          { required: true, message: '管理员邮箱必须！', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址！', trigger: 'blur' }
        ],
        phone: [
          { type: 'string', pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确！', trigger: 'blur' },
          { required: true, message: '手机号必须填写！', trigger: 'blur' }
        ],
        // password: [
        // { type: 'string', pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,16}$/,
        // message: '密码必须包含字母和数字', trigger: 'blur'
        // },
        // { required: true, message: '密码必须填写！', trigger: 'blur' }
        // ],
        /* 选择角色校验 */
        roleid_list: [
          { required: true, message: '请选择角色', trigger: 'change' },
          { type: 'array', min: 1, max: 3, required: true, message: '角色不能超过3个', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.form.id ? '修改' : '新增'
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 获取角色列表
    async getRoleList() {
      const res = await getRoleListApi()
      console.log(res)
      this.list = res.list
    },
    // 添加数据
    async addUserSubmit() {
      // this.$refs.uploadImg.fileList = []
      const avatar = this.$refs.uploadImg.fileList[0].url1
      await this.$refs.userform.validate()
      const res = await addUserApi({ ...this.form, avatar })
      console.log(res)
      this.$message.success('添加成功')
      this.isShow = false
      this.$emit('updateList')
    },
    // 取消重置表单
    closeForm() {
      console.log('关闭')
      // 清除表单中的数据
      this.form = {
        avatar: '',
        email: '',
        password: '',
        phone: '',
        roleid_list: [],
        status: '',
        username: ''
      }
      this.$refs.userform.resetFields()
      this.$refs.uploadImg.fileList = []
      this.$nextTick(() => {
        // 清除验证规则
        this.$refs.userform.clearValidate()
      })
    },
    // 修改数据的回显
    async edituserList(id) {
      this.isShow = true
      const res = await getUserInfoApi(id)
      // console.log(res)
      // 图片回显
      this.$refs.uploadImg.fileList = [{
        url: 'http://124.223.14.236:7005/' + res.avatar
        // url1: res.avatar
      }]
      this.form = res
    },
    // 修改后数据提交
    async updateUser() {
      // const avatar = this.$refs.uploadImg.fileList[0].url1
      await updataUserApi(this.form)
      this.$message.success('修改成功')
      this.isShow = false
      this.$emit('updateList')
    },
    // 开发变换触发更新
    async switchChange(val, id) {
      this.userList.status = val
      this.userList.id = id
      await changeUserStatus(this.userList)
      this.$message.success('修改状态成功')
    }
  }

}
</script>

<style>
  .el-dialog{
  padding-right: 50px;

}

</style>
